<template>
  <div class="region">
    <div class="content">
        <div class="left">地区：</div>
        <ul>
            <li :class="{active: activeFlag == ''}">全部</li>
            <li v-for="item in region" :class="{active: activeFlag == item.value}" :key="item.id" @click="changeActive(item.value)">{{ item.name }}</li>
        </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqHospitalLevelAndRegion } from '@/api/home';
import type { HospitalLevelAndRegionArr, HospitalLevelAndRegionResponseData } from '@/api/home/type';
import { ref, onMounted } from 'vue';

const $emit = defineEmits(['getRegion']);

let region =ref<HospitalLevelAndRegionArr>([]);

// 控制等级高亮
let activeFlag = ref<string>('');
const changeActive = (value:string) => {
    activeFlag.value = value;

    $emit('getRegion', value)
}

const getRegion = async () => {
    let res:HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('beijin')
    
    if (res.code === 200) {
        region.value = res.data;
    }
}

onMounted(()=>{
    getRegion();
})


</script>

<style scoped lang="scss">
.region {
    color: #7f7f7f;

    .content {
        display: flex;

        .left {
            margin-right: 10px;
            width: 56px;
        }

        ul {
            display: flex;
            padding: 0px;
            margin: 0px;
            flex-wrap: wrap;

            li {
                list-style: none;
                margin-right: 20px;
                margin-bottom: 10px;

                &.active{
                    color: #55a6fe;
                }
            }
            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>